<template>
  <div class="person">
    <h2>需求：当水温达到60度，或水位达到80cm，给服务器发送请求</h2>
    <h2>当前水温：{{ temp}}</h2>
    <h2>当前水位：{{ height}}</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>

   
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref,watch,watchEffect} from 'vue'

// 数据
let temp = ref(10)
let height=ref(0)

// 方法
function changeTemp() {
  temp.value+=10
}

function changeHeight() {
  height.value += 10
}

// 监视:watch实现
// watch([temp, height], (value) => {
//   let [newTemp,newHeight]=value
//   if (newTemp >= 60 || newHeight >= 80) {
//     console.log('给服务器发请求');
//   }
// })

// 监视：watchEffect实现
watchEffect(() => {
  if (temp.value>=60||height.value>=80) {
    console.log('给服务器发请求');
  }
})








</script>

<style scoped>
.person {
  background-color: rgb(218, 114, 200);
  box-shadow: 0 010px;
  border-radius: 10px;
  padding: 20px;
}

button {
  background-color: darkseagreen;
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>